<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="税金缴纳" name="payment">
    <section class="inner-text-block-section">
    <div class="title-section" style="magin-left:20">
      <div class="title">电子税务局涉税类型</div>
    </div>
    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="taxType"
        label="税种"
        >
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        >
      </el-table-column>
      <el-table-column
        prop="amountPayable"
        label="应缴金额">
      </el-table-column>
    </el-table>
  <div class="footer">
    <!-- <el-button type="primary" size="small" @click="enforcePay">强制缴纳</el-button> -->
    <el-button type="primary" size="small" @click="Pay(1)">发起缴纳</el-button>
    
  </div>
    <div class="title-section" style="magin-left:20">
      <div class="title" >个人所得税</div>
    </div>
    <el-table
      border
      :show-header="false"
      :data="personalTableData"
      style="width: 100%">
      <el-table-column
        prop="taxType"
        label="税种"
        >
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        >
      </el-table-column>
      <el-table-column
        prop="amountPayable"
        label="应缴金额">
      </el-table-column>
    </el-table>
    </section>

    <div class="footer">
      <!-- <el-button type="primary" size="small" @click="enforcePay">强制缴纳</el-button> -->
      <el-button type="primary" size="small" @click="Pay(2)">发起缴纳</el-button>
      <!-- <el-button type="primary" size="small" @click="back">返回</el-button> -->
    </div>

  </el-tab-pane>
  <el-tab-pane label="申报表及完税证明下载" name="download">
    <section class="inner-text-block-section">
        <div class="title-section" style="magin-left:20">
          <div class="title" >重要提示</div>
        </div>
        <div class="disc-section">
          1.在使用代税宝进行一键报税后，可下载对应税种的申报表；若某税种由会计人工处理，则代税宝数据库内无任何留存，故不能进行下载。<br>
          2.在下载完税证明时，可点击【查询数据】从税务局导出数据，导出流程将持续30秒。请尽量在税金缴纳完成一天以后导出，否则可能导致完税证明为空。<br>
        </div>
        <div class="title-section" style="magin-left:20">
          <div class="title">申报表下载</div>
        </div>
        <div class="form-section">
            <el-table
            border
            stripe
            :data="taxDeclarationStatusList"
            style="width: 100%">
            <el-table-column
              prop="taxType"
              label="税种"
            >
            <template slot-scope="scope">
              {{taxTypeMap[scope.row.taxType]}}
            </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
            >
            <template slot-scope="scope">
              {{downStatusMap[scope.row.status]}}
            </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
            <template slot-scope="scope">
              <!-- <el-link :href="downloadCertificateUri"
                :underline="false" target="_blank"
                >
                <el-button icon="el-icon-download"
                  type="primary"
                  size="small">下载报表</el-button>
              </el-link> -->
              <el-button type="primary" size="small" v-if="scope.row.status" @click="downloadTax(scope.row.fileType, scope.row.taxType)">
                下载报表
              </el-button>
            </template>

            </el-table-column>
          </el-table>
        </div>

        <div class="title-section" style="magin-left:20">
          <div class="title">完税证明下载</div>
        </div>
          <div class="form-section">
            <el-table
            stripe
            border
            :data="payFileInfoTable"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="type"
              label="税种"
              >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              >
              <template slot-scope="scope">
                <span v-if="scope.row.status==0">待查询</span>
                <span v-if="scope.row.status==3">查询中</span>
                <span v-if="scope.row.status==4">可下载</span>
                <span v-if="scope.row.status==5">可下载</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" v-if="scope.row.status==4 || scope.row.status==5" @click="downloadCompleteCer">下载证明</el-button>
              <el-button type="primary" size="small" v-if="scope.row.status==0" @click="Pay(4)">查询</el-button>
            </template>
            </el-table-column>
          </el-table>
        </div>
        

        </section>
  </el-tab-pane>
</el-tabs>


</template>

<script>
import {getPreMonth} from '@/components/utiles';

export default {
  data(){
    return {
      activeName: "payment",
      tableData:[],
      bizId:0,
      types:["企业增值税及城建税与附加", "企业所得税", "个人所得税"],
      taxDeclarationStatusList:[],
      payFileInfoTable:[],
      personalTableData:[],
      completeTaxStatus: 0,
      taxTypeMap:["", "企业增值税", "个人所得税", "企业增值税-小规模纳税人", "企业所得税", "个人经营所得税"],
      downStatusMap:{true: "可下载", false:"数据库无该数值"},
    }
  },
  props:{
    bName:{
      type: String,
      default:''
    },
    cName:{
      type: String,
      default:''
    },
    month:{
      type: String,
      default:''
    },
  },
  methods:{
    downloadCompleteCer(){
      this.$http.get("/taxesStandard/downloadPayFileInfo", {
        params:{
          bName:this.bName,
          cName:this.cName,
          month: getPreMonth()
        }.then((res)=>
        {
          if (res.code == 0){
            let a = document.createElement('a');
            a.href=res.data.fileUrl;
            a.click();
            this.$message.success("下载成功");
          }else{
            this.$message.error("下载失败");
          }
        })
      })
    },
    downloadTax(fileType, taxType){
      this.$http.get("/taxesStandard/downloadDeclareFileInfo", {
        params:{
          bizId: this.bizId,
          fileType: fileType,
          type: taxType,
          month: getPreMonth()
        }
        }).then((res)=>
        {
          if (res.code == 0){
            let a = document.createElement('a');
            a.href=res.data.fileUrl;
            a.click();
            this.$message.success("下载成功");
          }else{
            this.$message.error("下载失败");
          }
        })
    },
    back(){
      this.$emit('back', 0)
    },
    enforcePay(){
      this.$confirm('系统监测到有部分税种未申报，请务必保证已人工处理。代税宝会将电子税务局内已申报税种全部缴纳。', '提示', {
        confirmButtonText: '确认',
        type:'warning'
      }).then(()=>{
        
      })
    },
    formatPayFileInfoTable(){
          this.payFileInfoTable = [{type:"完税证明", status: this.completeTaxStatus}];
    },
    onload(){
      switch(this.activeName){
        case "download":
          this.$http.get("/taxesStandard/getDeclareFileInfo", {
            params:{
              bName: this.bName,
              cName: this.cName,
              month: getPreMonth()
            }
          }).then((res)=>{
            if (res.code != 0) {
              this.$message.error(res.message);
            } else {
              this.bizId = res.data.bizId;
              this.completeTaxStatus = res.data.status;
              this.taxDeclarationStatusList = res.data.taxDeclarationStatusList;
              this.formatPayFileInfoTable();
            }
          })
          break;
        default:
          this.$http.get("/taxesStandard/getTaxDeclareStatusDetail", {
            params: {
              bName: this.bName,
              cName: this.cName,
              month:getPreMonth()
            }
          }).then((res)=>{
            if(res.code != 0){
              return this.$message.error("获取状态失败", res.message)
            }else{
              this.tableData = res.data.list.filter(taxEle => {
                return taxEle.taxType != "个人所得税"
              });
              this.personalTableData = res.data.list.filter(taxEle => {
                return taxEle.taxType == "个人所得税"
              })
              this.mandatory = res.data.mandatory
              this.totalAmount = res.data.totalAmount
            }
          })
      }
    },

    handleClick(tab, event){
      this.onload();
    },
    Pay(type){
      this.$http.post("/taxesStandard/taxTotaloptions", {
        bname: this.bName,
        cname: this.cName,
        month:getPreMonth(),
        type: type
      }).then(res=>{
        if (res.code==0){
          this.$message.success("成功")
        } else {
          this.$message.error("失败: ", res.message)
        }
      })
    }
  },
  mounted(){
    this.onload();
  },
  watch: {
    cName:{
      handler(n, o) {
      this.onload();
    },
      deep:true
    },
    completeTaxStatus: {
      handler(n, o){
        this.formatPayFileInfoTable();
      }
    }

},
}
</script>

<style lang="less" scoped>
@import "../../../assets/var.less";
  .footer{
    padding: 20px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
  }

  .inner-text-block-section {
    .title-section,
    .inner-title-section {
       // border-bottom: 1px solid #aaa;
        margin: 0 0 0 0;
        font-size: 16px;
        .title {
            border-left: 4px solid #1890ff;
            padding-left: 10px;
            margin: 6px 0;
        }
        .el-button--text {
            float: right;
            padding: 0;
        }
        .iconfont {
            margin-left: 7px;
        }
        .icon-edit {
            font-size: 12px;
        }
        .right {
            float: right;
            padding-right: 10px;
            font-size: 14px;
            color: @color-grey-low;
        }
    }
    .inner-title-section {
        margin: 0 0 20px 0;
    }

    .disc-section{
      font-size: 16;
      padding:10px;
      padding-top:0;
      border-bottom: 1px solid #aaa;
    }

    .form-section{
      width:auto;
      max-height: 500px;
      margin-top: 10px;
//      border-bottom: 1px solid #aaa;
      overflow: auto;
    }
    
    .text-section {
        > .item {
            display: inline-block;
            width: 206px;
            line-height: 2em;
        }
        > .single-line {
            display: block;
            width: auto;
        }
    }
}
</style>